<template>
	<view class="goodsBlock">
		<block v-for="(item,index) in goodsList" :key="index">
			<view class="guess-item" @click="navToDetailPage(item)">
				<view class="image-wrapper">
					<!-- <image class="image-wrapper-img" lazy-load :src="item.image" mode="aspectFill"></image> -->
					<easy-loadimage mode="aspectFill"
					    :scroll-top="scrollTop"
					    :image-src="item.image"></easy-loadimage>
				</view>
				<view class="titleBox clamp2">
					<text v-if="item.seller_type == 2" class="lebal">自营</text>
					{{item.store_name}}
				</view>
				<!-- <text class="info clamp">{{item.store_info}}</text> -->

				<view class="simple" v-if="shell">
					<!-- 贝壳抵扣 -->
					<image class="simple-img" src="../../static/images/public/yellowShellIcon.png" v-if="shellType == 2" mode=""></image>
					<image class="simple-img" src="../../static/images/public/redShellIcon.png" v-if="shellType == 3" mode=""></image>
					<image class="simple-img" src="../../static/images/public/blueShellIcon.png" v-if="shellType == 4" mode=""></image>
					<text class="price" :style="{color:shell?'#333':''}">{{item.price}}</text>
				</view>
				<view class="pickPrice" v-else-if="pick">
					<text class="price">{{item.price}}</text>
					<text class="detail">详情</text>
				</view>
				<view class="integralPrice" v-else-if="integral">
					<text class="price">{{item.price}}</text>
					<text class="detail">{{item.sale_num}}次兑换</text>
				</view>
				<view class="ticketPrice" v-else-if="ticket">
					<text class="price">{{item.price}}</text>
					<text class="detail">{{item.sale_num}}次兑换</text>
				</view>
				<view class="simple" v-else>￥
					<text class="price">{{item.price}}</text>
					<view class="black_get" v-if="!shell&&!pick&&!integral&&!ticket">
						<text class="black_get_text">可得{{item.blackS}}黑贝壳</text>
					</view>
				</view>
				<view class="vipPrice" v-if="!shell&&!pick&&!integral&&!ticket">
					<view class="left">
						<text class="vipPrice-text a">{{item.price1}}</text>
						<text class="icon icon-k1">k1</text>
					</view>
					<view class="right">
						<text class="vipPrice-text b">{{item.price2}}</text>
						<text class="icon icon-k2">k2</text>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue'
	export default {
		name:"goodsBlock",
		components:{easyLoadimage},
		props: {
			goodsList: {
				type: Array,
			},
			// 是否置换专区
			shell: {
				type: Boolean,
				default: false
			},
			// 置换贝壳种类
			shellType: {
				type: [Number, String],
				default: 0
			},
			// 是否提货专区
			pick: {
				type: Boolean,
				default: false
			},
			// 是否积分商城
			integral: {
				type: Boolean,
				default: false
			},
			// 是否券商城
			ticket: {
				type: Boolean,
				default: false
			},
			// 是否优享专区
			enjoy: {
				type: Boolean,
				default: false
			},
			scrollTop:{
			    type: Number,
			}
		},

		data() {
			return {}
		},
		methods: {
			//详情页
			navToDetailPage(item) {
				if (this.shell) {
					//置换商品详情
					uni.navigateTo({
						url: `/mall/permutation/perProduct?id=${item.id}&type=${this.shellType}`
					})
				} else if (this.pick) {
					//提货卡商品详情
					uni.navigateTo({
						url: `/mall/pickCardMall/pickCardproduct?id=${item.id}`
					})
				} else if (this.integral) {
					//积分商城详情
					uni.navigateTo({
						url: `/mall/IntegralMall/IntegralProduct?id=${item.p_id}`
					})
				}  else if (this.ticket) {
					//券商城详情
					uni.navigateTo({
						url: `/mall/Ticket/IntegralProduct?id=${item.p_id}`
					})
				} else if (this.enjoy) {
					//优享专区详情
					uni.navigateTo({
						url: `/mall/enjoyMall/enjoyProduct?id=${item.id}`
					})
				} else {
					uni.navigateTo({
						url: `/mall/product/product?id=${item.id}`
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.goodsBlock {
		display: flex;
		flex-wrap: wrap;
	}

	.guess-item {
		padding-bottom: 20rpx;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		width: 335rpx;
		border-radius: 20rpx;
		overflow: hidden;
		background: #fff;
		height: min-content; //解决app guess-item 高度会跟随父元素的高度
		box-shadow: 0px 2rpx 9rpx 0px rgba(21, 21, 21, 0.1);
		&:nth-child(2n+1) {
			margin-right: 20rpx;
		}

		.image-wrapper {
			width: 340rpx;
			height: 340rpx;
			overflow: hidden;

			.image-wrapper-img {
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}

		.titleBox {
			margin: 10rpx;
			font-size: 28rpx;
			color: #333;
			font-weight: bold;
			height: 80rpx;
			line-height: 40rpx;
			word-break: break-all;

			.lebal {
				padding: 5rpx 10rpx;
				font-size: 20rpx;
				text-align: center;
				color: #fff;
				background: rgba(253, 117, 103, 1);
				border-radius: 50px;
				margin-right: 10rpx;
			}
		}

		// .info {
		// 	line-height: 30rpx;
		// 	height: 30rpx;
		// 	padding: 0 10rpx;
		// 	font-size: 24rpx;
		// 	color: #666;
		// }
		.pickPrice {
			display: flex;
			justify-content: space-between;
			padding: 10rpx 10rpx 0;
			align-items: center;

			.price {
				color: #343434;
				line-height: 1;
				font-weight: bold;
				font-size: 36rpx;

				&:after {
					content: " 点";
					font-size: 24rpx;
				}
			}

			.detail {
				font-size: 24rpx;
				background: #FBC866;
				border-radius: 4rpx;
				padding: 0 10rpx;
				color: #fff;
				height: 44rpx;
				line-height: 44rpx;
			}

		}

		.integralPrice {
			display: flex;
			align-items: baseline;
			padding: 10rpx 10rpx 0;

			.price {
				color: #FC7741;
				line-height: 1;
				font-weight: bold;
				font-size: 36rpx;

				&:after {
					color: #FC7741;
					content: " 积分";
					font-size: 22rpx;
				}
			}

			.detail {
				margin-left: 10rpx;
				font-size: 22rpx;
				color: #aaa;
			}

		}
		.ticketPrice {
			display: flex;
			align-items: baseline;
			padding: 10rpx 10rpx 0;
		
			.price {
				color: #FC7741;
				line-height: 1;
				font-weight: bold;
				font-size: 36rpx;
		
				&:after {
					color: #FC7741;
					content: " 券";
					font-size: 22rpx;
				}
			}
		
			.detail {
				margin-left: 10rpx;
				font-size: 22rpx;
				color: #aaa;
			}
		
		}

		.simple {
			padding: 10rpx;
			font-size: 20rpx;
			color: $mall-price;
			line-height: 1;
			font-weight: bold;
			display: flex;
			align-items: center;

			.simple-img {
				width: 30rpx;
				height: 20rpx;
				margin-right: 10rpx;
			}

			.price {
				font-size: 32rpx;
			}
			.black_get {
				padding: 0 10rpx;
				margin-left: 10rpx;
			
				.black_get_text {
					display: inline-block;
					height: 30rpx;
					line-height: 30rpx;
					font-size: 18rpx;
					font-weight: normal;
					color: #83B86C;
					border: 1rpx solid #83B86C;
					border-radius: 10rpx;
					padding: 0 4rpx;
				}
			}
		}

		.detail {}

		.vipPrice {
			padding: 0 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #333;
			font-weight: bold;

			.vipPrice-text {
				font-size: 20rpx;

				&:before {
					content: '￥';
					font-size: 14rpx;
				}
			}
			.icon{
				margin-left: 10rpx;
				padding: 0rpx 16rpx;
				border-radius: 20rpx;
				font-size: 18rpx;
			}
			.icon-k1{
				background: linear-gradient(180deg, #E8CA9F 0%, #D7AE7C 100%);
			}
			.icon-k2{
				color: #FAD39C;
				background: linear-gradient(0deg, #373635 0%, #5F5956 100%);
			}
		}

		
	}
</style>
